<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>QuoJS 3.0.0</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        section {
            display: block;
            position: absolute;
            margin-top: 100px;
            width: 100%;
            height: 100%;
        }
        article {
            display: block;
            background-color: rgba(0,0,0,0.25);
            width: 100%;
            height: 45%;
            margin-bottom: .5%;
            text-align: center;
            font-size: 0.7rem;
        }
        div.logger {
            position: fixed;
            background-color: rgba(0,0,255,0.1);
            top: 0;
            font-size: 0.5em;
            width: 100%;
            height: 100px;
        }
        /*
        article:hover, article:active {
            background-color: rgba(0,0,0,0.5);
            color: white;
        }*/
    </style>
</head>
<body>
    <div class="logger"></div>
    <section>

        <article class="basic"><h1>basic</h1></article>
        <article class="tap"><h1>tap</h1></article>
        <article class="swipe"><h1>swipe</h1></article>
        <article class="rotate"><h1>rotate</h1></article>
        <article class="pinch"><h1>pinch</h1></article>
        <article class="drag"><h1>drag</h1></article>
    </section>

    <script src="../bower/quo.js"></script>
    <script src="../bower/quo.ajax.js"></script>
    <script src="../bower/quo.css.js"></script>
    <script src="../bower/quo.element.js"></script>
    <script src="../bower/quo.environment.js"></script>
    <script src="../bower/quo.output.js"></script>
    <script src="../bower/quo.query.js"></script>
    <script src="../bower/quo.events.js"></script>
    <script src="../bower/quo.gestures.js"></script>

    <script>

        window.log = function(t) {
            $$(".logger").append($$("<span>" + t + "; </span>"));
        }

        var EVENTS = {
            BASIC   : ["touchstart", "touchmove", "touchend", "touch", "orientationchange"],
            TAP     : ["doubleTap", "hold"],
            SWIPE   : ["swipe", "swiping", "swipeLeft", "swipeRight", "swipeUp", "swipeDown"],
            ROTATE  : ["rotate", "rotating", "rotateLeft", "rotateRight"],
            PINCH   : ["pinch", "pinching", "pinchIn", "pinchOut"],
            DRAG    : ["dragging", "drag"]
        };

        testEvent($$("article.basic"), EVENTS.BASIC);
        testEvent($$("article.tap"), EVENTS.TAP, true);
        testEvent($$("article.swipe"), EVENTS.SWIPE, true, true);
        testEvent($$("article.rotate"), EVENTS.ROTATE, true, true);
        testEvent($$("article.pinch"), EVENTS.PINCH, true, true);
        testEvent($$("article.drag"), EVENTS.DRAG, true, true);

        function testEvent(el, collection, delegate, preventDefault) {
            for (var _i = 0, _len = collection.length; _i < _len; _i++) {
                onEvent(el, collection[_i], preventDefault);
                if (delegate) delegateEvent(el, collection[_i]);
            }
        };

        function onEvent(el, event_name, preventDefault) {
            el.on(event_name, function(event) {
                label = event.type
                if (label === "swiping") label = event.quoData.delta.x + "-" + event.quoData.delta.y;
                if (label === "pinching") label = parseInt(event.quoData.delta);
                if (label === "rotating") label = parseInt(event.quoData.delta) + "º";
                if (label === "dragging") label = "[" + parseInt(event.quoData.delta.x) + "," + parseInt(event.quoData.delta.y) + "]";
                el.append($$("<span>" + label + "; </span>"));
                if(preventDefault === true) {
                    console.log("event", event);
                    event.preventDefault();
                    // event.originalEvent.preventDefault();
                }
            });
        };

        function delegateEvent(el, event_name) {
            el[event_name](function(event) {
                console.info("delegate :", event_name, event.quoData);
            });
        }
    </script>
</body>
</html>
